<template>
  <section>
    <main class="body">
      <router-view v-model:routes="active" />
    </main>
    <van-tabbar v-model="active" :route="ture">
      <van-tabbar-item
        @click="getActive('home')"
        name="home"
        icon="home-o"
        to="./home"
        >首页</van-tabbar-item
      >
      <van-tabbar-item
        @click="getActive('user')"
        name="user"
        icon="contact"
        to="./user"
        >我的</van-tabbar-item
      >
    </van-tabbar>
  </section>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "home",
  components: {},
  setup() {
    const state = reactive({
      active: sessionStorage.getItem("active") || "home",
    });
    const getActive = (item) => sessionStorage.setItem("active", item);
    return {
      ...toRefs(state),
      getActive,
    };
  },
};
</script>

<style lang="less" scoped>
.body {
  height: calc(100vh - 1.3333rem);
  overflow-y: auto;
}
.van-tabbar--fixed {
  z-index: 2005;
}
</style>
